import { Table,  Col, Row, Radio ,DatePicker ,Select,Badge ,Divider,Input,Card,Image,Pagination,Space } from 'antd';
import {Link} from 'umi';
import React, { useState} from 'react';
import shebei1 from '/public/shebei1.png';
import shebei2 from '/public/shebei2.png';

const { RangePicker } = DatePicker;
import {
  CalendarOutlined,SearchOutlined,ThunderboltOutlined,LeftOutlined
} from '@ant-design/icons';
import moxing from '/public/moxing2.png';
import styles from './style.less'

const { Option } = Select;

const DeviceNameA: React.FC = () => {


  const dataSource = [
  
  ];
  for(let i=1;i<100;i++){
    dataSource.push({
      gatewayID: '112321125454545',
      instrumentAddress: '二楼',
      equipmentModel: 'ARDRF',
      location: 'A栋宿舍',
      IOTCardNumber: '112321125454545',
     
    })

  }


  const columns = [
    {
      title: '',
      key: 'gatewayID',
        render: (text, record) => (
          <Space size="middle">
           <span  className={styles.shebeiStateBtn}>正常</span>
          </Space>
        ),
      },
    {
      title: '网关识别号',
      dataIndex: 'gatewayID'
    },
    {
      title: '仪表地址',
      dataIndex: 'instrumentAddress',
    },
    {
      title: '设备型号',
      dataIndex: 'equipmentModel',
    }, {
      title: '物联网卡号',
      dataIndex: 'IOTCardNumber',
    }, {
      title: '区域位置',
      dataIndex: 'location',
    },
    {
      title: '设备控制',
      key: 'gatewayID',
        render: (text, record) => (
          <Space size="middle">
            <a>Invite {record.equipmentModel}</a>
            <a>Delete</a>
          </Space>
        ),
      }
   
  ];

  const [model,setModel] = useState<string>('1')  
  function handleSizeChange (e) {
    setModel(e.target.value );
  }
  function toDetail(){
    //routerRedux.push('detail');
  }
    return (
      <>
          <Row gutter={24}  style={{ margin: '-16px 0 -16px -16px'}} > 
          <Col xl={5} lg={5} md={5} sm={6} xs={6} style={{padding:0,borderRight: '1px solid #355fb8' }}>
            <Row  className={styles.shousuoTitle}><LeftOutlined /> 收起 </Row>
            <div   className={styles.leftContainer}>
              <Row   className={styles.shebeiming}>马达保护器  <span  className={styles.shebeiStateBtn}>正常</span> </Row>
              <Link   to='realtime' > 
                  <div className={styles.shibtn}>
                  实时数据 
                </div>
                </Link>
              <Row style={{lineHeight:'30px'}}>  
                <Col span={12}   className={styles.normal}> <Badge color="#5dbef6"  />设备1</Col>   
                <Col span={12} className={styles.alarm}> <Badge color="#f2b566" />报警：0</Col>
                <Col span={12} className={styles.onLine}> <Badge color="#0bb7b4"   />在线：0</Col>  
                <Col span={12}   className={styles.offLine}> <Badge color="#f26665" />离线：1</Col>
              </Row>
            
              <Divider dashed    className={styles.dashedLine} />
              <Row> 
                <Col span={12} className={styles.loucengWL} ><div className={styles.louceng}>全部</div></Col>
                <Col span={12} className={styles.loucengWR} ><div className={styles.louceng}>一层</div></Col> 
                <Col span={12} className={styles.loucengWL} ><div className={styles.louceng}>二层</div></Col> 
                <Col span={12} className={styles.loucengWR} ><div className={styles.louceng}>三层</div></Col>
                <Col span={12} className={styles.loucengWL}  ><div className={styles.louceng}>四层</div></Col>
                <Col span={12} className={styles.loucengWR}  ><div className={styles.louceng}>五层</div></Col> 
              </Row>
            </div>
          </Col>
          <Col xl={19} lg={19} md={19} sm={18} xs={18} style={{ padding: 22 }} className={styles.servuychart}>
            <Row className={styles.tabletop}>
              <div   className={styles.RTL} >
              <span className={styles.flexAlignCenter}>  <Image src={shebei2}  preview={false} /> &nbsp; 智慧探测仪</span>
              <span><Badge color="#5dbef6"/>正常</span>
              <span><Badge color="#f2b566"/>报警</span>
              <span><Badge color="#fd6863"/>故障</span>
              <span><Badge color="#ccc"/>离线</span>

              </div>
              <Row>
                <div className={styles.inputBg}>
                   <Input bordered={false} placeholder="网关识别号/设备型号/..." className={styles.inputBg} suffix={ <SearchOutlined  style={{    fontSize: '20px'}}/> }></Input>
                </div>
                <Radio.Group value={{model}}  onChange={handleSizeChange} className={styles.shanxuan}>
                  <Radio.Button value="1" className={model=='1'?styles.btnSelected:''}><CalendarOutlined />陈列模式</Radio.Button>
                  <Radio.Button value="2"  className={model=='2'?styles.btnSelected:''}><CalendarOutlined />模型模式</Radio.Button>
                  <Radio.Button value="3"  className={model=='3'?styles.btnSelected:''}><CalendarOutlined />表格模式</Radio.Button>
                </Radio.Group>
              </Row>
            </Row>

            <Table dataSource={dataSource} columns={columns}  style={{    display: model=='3'?'block':'none'}} />

            <div  style={{    display: model=='1'?'block':'none'}} >
              <Row>
                <Col span={6} className={styles.loucengWL} > 
                  <Card>
                  <Row className={styles.tabletop}>
                    <div    className={styles.flexAlignCenter}>
                       <Image src={shebei2}  preview={false} />  &nbsp;  <Link   to='details' >  112324568554</Link>
                    </div>
                    <span  className={styles.shebeiStateBtn}>正常</span>
                  </Row>
                  <Row style={{    justifyContent: 'center',margin: '20px 0'}}>
                    <Image
                      width={100}
                      height={80}
                      src={shebei1}
                    />
                    </Row>
                    <p>电流：--A--A--A</p>
                    <p>仪表地址：115454545444</p>
                    <p>设备型号：ARDRF</p>   
                    <p>物联网卡号：ARD@FC</p>
                    <p>区域位置：二楼</p>
                  </Card>
                </Col>
                <Col span={6} className={styles.loucengWL} > 
                  <Card>
                  <Row className={styles.tabletop}>
                    <div    className={styles.flexAlignCenter}>
                       <Image src={shebei2}  preview={false} />  &nbsp;  <Link   to='details' >  112324568554</Link>
                    </div>
                    <span  className={styles.shebeiStateBtn}>正常</span>
                  </Row>
                  <Row style={{    justifyContent: 'center',margin: '20px 0'}}>
                    <Image
                      width={100}
                      height={80}
                      src={shebei1}
                    />
                    </Row>
                    <p>电流：--A--A--A</p>
                    <p>仪表地址：115454545444</p>
                    <p>设备型号：ARDRF</p>   
                    <p>物联网卡号：ARD@FC</p>
                    <p>区域位置：二楼</p>
                  </Card>
                </Col>
                <Col span={6} className={styles.loucengWL} > 
                  <Card>
                  <Row className={styles.tabletop}>
                    <div    className={styles.flexAlignCenter}>
                       <Image src={shebei2}  preview={false} />  &nbsp;  <Link   to='details' >  112324568554</Link>
                    </div>
                    <span  className={styles.shebeiStateBtn}>正常</span>
                  </Row>
                  <Row style={{    justifyContent: 'center',margin: '20px 0'}}>
                    <Image
                      width={100}
                      height={80}
                      src={shebei1}
                    />
                    </Row>
                    <p>电流：--A--A--A</p>
                    <p>仪表地址：115454545444</p>
                    <p>设备型号：ARDRF</p>   
                    <p>物联网卡号：ARD@FC</p>
                    <p>区域位置：二楼</p>
                  </Card>
                </Col>

              
              </Row>
              <Row      className={styles.pagination}>
                <Pagination
                total={80}
                showTotal={total => `共 ${total} 项`}
                defaultPageSize={15}
                defaultCurrent={1}
                hideOnSinglePage={true}
               />
             </Row>
            </div>

            <div  className={styles.moxingBox} style={{    display: model=='2'?'block':'none'}}>
               <Image width={'100%'}    src={moxing}   />


            </div> 
          </Col>
        </Row>
      </>
    );
};

export default DeviceNameA;